<template>
  <view class="context">
    <list iconPath="/static/allMeetingIcos/time.svg" message="参会人" type="text" text=" "></list>
    <view class="personContext">
      <view class="box">
        <!--标签在这  最多 9 个！！！-->
        <view class="tag">{{ "小明" }}</view>
        <view class="tag">{{ "张三" }}</view>
        <view class="tag">{{ "李四" }}</view>
        <view class="tag" @click="popup = true">添加+</view>
      </view>
    </view>
    <u-popup :show="popup" mode="bottom" round="14" @close="closeRemindShow">
      <list iconPath="/static/allMeetingIcos/time.svg" message="参会人" type="text"></list>
      <view class="meetingPerson">
        <view class="personContext2">
          <view class="box">
            <!--标签在这  最多 9 个！！！-->
            <view class="tag">{{ "小明" }}</view>
            <view class="tag">{{ "张三" }}</view>
            <view class="tag">{{ "李四" }}</view>
            <view class="tag" @click="popup = true">添加+</view>
          </view>
        </view>
        <view class="input-box">
          <u-input placeholder="查找成员" shape="circle"></u-input>
        </view>
        <view class="department">
          <view class="department-box">
            <checkbox-group @change="change">
              <view v-for="(employees, department) in departments" :key="department">
                <checkbox :value="department" @change="toggleEmployees(department)">{{ department }}</checkbox>
                <view v-show="selectedDepartments.includes(department)">
                  <view class="employee" v-for="(employee, index) in employees" :key="index">
                    <checkbox-group @change="addPerson">
                        <checkbox :value="employee"/> {{ employee }}
                    </checkbox-group>
                  </view>
                </view>
              </view>
            </checkbox-group>

          </view>
        </view>
        <button class="add" @click="addPersonSub()">确认添加</button>
      </view>
    </u-popup>
  </view>
</template>

<script>
import list from "@/pages/meeting/component/list.vue";

export default {
  components: {list},
  data() {
    return {
      popup: false,
      selectedDepartments: [], // 存储选择的部门
      departments: {//假数据
        '部门1': ['员工1', '员工2'],
        '部门2': ['员工1', '员工2'],
        '部门3': ['员工1', '员工2']
        // 在这里添加更多的部门和员工信息
      },
      person: []  //汇总名单！！！

    }
  },
  computed:{
  },
  methods: {
    closeRemindShow() {
      this.popup = false;
    },
    toggleEmployees(department) {
      // 切换部门的显示状态
      if (this.selectedDepartments.includes(department)) {
        // 如果已选中，移除部门
        this.selectedDepartments = this.selectedDepartments.filter(dep => dep !== department);
      } else {
        // 如果未选中，添加部门
        this.selectedDepartments.push(department);
      }
    },
    change(res){
      this.selectedDepartments = res.detail.value
    },
    addPerson(person){
      let value = person.detail.value;
      this.person.push(value);
    },
    //接口在这里拿到数据
    addPersonSub(){
      console.log(this.person)//this.person 最终提交
      this.popup = false
    }

  }
}
</script>


<style>
.context {
  background-color: white;
}

.meetingPerson {
  height: 80vh;
  width: 100%;
}

.meetingPerson view {
  margin-top: 1%;
}

.personContext {
  width: 100%;
  height: 180rpx;
  display: flex;
  justify-content: center;
  align-items: center;
}

.box {
  height: 75%;
  width: 85%;
  border: 1rpx #ebebeb solid;
  border-radius: 20rpx;
  display: flex;
  /*justify-content: center;*/
  align-items: center;
  flex-wrap: wrap;
}

.tag {
  height: 45rpx;
  width: 110rpx;
  border-radius: 10rpx;
  font-size: 25rpx;
  border: 1rpx #2293ff solid;
  color: #1890FF;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: rgba(230, 241, 252, 1);
  margin: 1%;
}

.personContext2 {
  width: 100%;
  height: 180rpx;
  display: flex;
  justify-content: center;
  align-items: center;

}

.department {
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  margin-top: 2%;
}

.department-box {
  width: 85%;
  height: 50vh;
  padding: 1%;
  background-color: #fdfdfd;
  border-radius: 15rpx;
}

.add {
  background-color: #2897fb;
  height: 90rpx;
  width: 85%;
  color: white;
}

.input-box {
  height: 70rpx;
  width: 90%;
  margin-left: 5%;
  display: flex;
  justify-content: center;
  margin-top: 2%;
}

u-input {
  height: 100%;
  width: 85%;
  border-radius: 15rpx;
  font-size: 30rpx;
  padding-left: 1%;
}

.employee {
  margin-left: 20%;
}

</style>